<template>
    <div id="heatmapChart"></div>
</template>

<script>
export default {
    data() {
        return {
            myChart: null, // echarts实例载体
        }
    },
    props: ['essayCountData','resizeOrNot'],
    watch: {
        essayCountData: function () {
            this.echartsInit()
        },
        resizeOrNot: function () {
            this.myChart.resize()
        }
    },
    methods: {
        // echarts初始化
        echartsInit() {
            this.myChart = this.$echarts.init(document.getElementById('heatmapChart'))
            let option = {
                title: {
                    text: '随笔日历图',
                    textStyle: {
                        fontSize: '20',
                        color: '#fff'
                    },
                    left: 'center'
                },
                tooltip: {
                    position: 'top',
                    formatter: function (params) {
                        return '随笔数量：' + params.value[1];
                    }
                },
                visualMap: { // 日历取值框
                    show: false,
                    inRange: {
                        color: ['#2aff4a', '#148425'],
                        opacity: 0.3
                    },
                },
                calendar: { // 设置日历属性
                    left: '10%', // 调整日历图在容器中的位置
                    right: '10%',
                    top: '20%',
                    bottom: '10%',
                    range: '2024-03', // 设置日历图显示的时间范围
                    cellSize: ['auto', 20],
                    yearLabel: { // 日历的年份Label
                        show: false
                    },
                    monthLabel: { // 日历的月份Label
                        show: false
                    },
                    dayLabel: { // 设置从星期一到星期日
                        firstDay: 1,
                        nameMap: 'cn',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    orient: 'vertical', // 垂直日历
                    itemStyle: {
                        normal: {
                            color: '#202020',
                            opacity: 0.3,
                        },
                    },
                },
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: this.essayCountData,
                }]
            }
            this.myChart.setOption(option)
        }
    },
    mounted() {
        this.echartsInit();
    },
}
</script>

<style lang="scss" scoped>
#heatmapChart {
    height: 100%;
    width: 100%;
}
</style>